<template>
  <div class="custom-input p-12 flex align-center">
    <i class="iconfont text-5xl mr-12" :class="icon"></i>
    <input
      class="border-0 text-4xl"
      type="text"
      :placeholder="placeholder"
      :value="modelValue"
      @input="handleInput"
    />
  </div>
</template>

<script setup lang="ts">
interface CustomInputProps {
  icon: string;
  placeholder: string;
  modelValue: string;
}
//为props设定默认值
withDefaults(defineProps<CustomInputProps>(), {
  icon: "icon-youxiang",
  placeholder: "请输入您心仪的岗位",
});
const emit = defineEmits<{
  (e: "update:modelValue", arg: string): void;
}>();
const handleInput = (ev: Event) => {
  let v = (ev.target as HTMLInputElement).value;
  emit("update:modelValue", v);
};
</script>

<style lang="scss" scoped>
.custom-input {
  border: 1px solid rgba(238, 238, 238, 1);
}
</style>
